<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-3.7.1.js" type="text/javascript"></script>
<%
String random=Math.random()+"";
request.setAttribute("random", random);
%>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小说介绍页面</title>
</head>
<link rel="stylesheet" href="css/shu.css?v=${random }">

<body>
    <div class="nav-wrap" id="nav-wrap" >
        <div class="left-items">
            <div class="qidian-logo j_qidian_logo">
                <a id="nav-logo" class="nav-logo" href="index.jsp"></a>
                
            </div>
            <div class="all-works" id="all-works">
                <p class="color-font all-works-title" style="color: rgb(25, 25, 25)">
                    全部分类
                </p>
                <em class="iconfont icon-size color-font" style="color: rgb(25, 25, 25)"></em>
                <div class="all-works-catalog">
                    <a class="title" href="#"  ><em class="iconfont catalog-icon"></em> 分类频道</a>
                    <ul>
						<c:forEach var ="item" items="${requestScope.typeList }">
                        <li>
                            <a href="selectBookByTypeServlet?typeName=${item }"   >${item }</a>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
       
            <em class="dividing-line fantasy"></em>
            <c:forEach var ="item" items="${requestScope.typeList }" >
            		<div class="catalog-a fantasy">
		                <a class="color-font" href="selectBookByTypeServlet?typeName=${item }"   rel="nofollow" style="color: rgb(25, 25, 25)">${item }</a>
		            </div>
            		
            </c:forEach>
        </div>
        <div class="right-items">
            <form id="formUrl" class="search-wrap" action="MessageServlet"   method="get">
                <label id="search-btn-new" class="search-btn">
                <button type="submit" style="background-color: #e5353e;color:white;cursor: pointer;">搜索</button></label>
                <em class="iconfont icon-search"></em>
                <input class="search-box" id="mytext" name="mytext" placeholder="谁让他玩游戏王的！" autocomplete="off" />
                <label id="clear-btn" class="close-btn"></label>
            </form>
            
            <div id="login-box" class="login-box">
                <div class="sign-out">

                </div>

                <div class="sign-in hidden" id="sign-in">
                    <div class="sign-in-btn">
                        <a href="#"   id="user-name" class="color-font6"
                            style="color: rgb(128, 128, 128)">${sessionScope.user.userNickName}</a>
                        <em class="iconfont icon-size color-font6" style="color: rgb(128, 128, 128)"></em>

                        <div class="user-info">
                            
                            
                            <a href="UserCenterServlet"   >个人中心</a>
                           
                            <a id="exit-btn" href="ExitServlet" >退出</a>
                        </div>
                    </div>
                </div>
            </div>
            <em class="dividing-line"></em>
            <div class="my-bookshelf">
                <a class="color-font6" href="UserCenterServlet"  rel="nofollow"
                    style="color: rgb(128, 128, 128)">我的书架</a>
            </div>
        </div>
    </div>
    <!-- ------第二部分------- -->
    <div class="crumbs-nav-new">
        <span>
            <cite class="lt"></cite>
            <a class="" href="index.jsp" >首页</a>
            <em class="iconfont crumb-icon">></em>
            <a class="" href="selectBookByTypeServlet?typeName==${requestScope.novelById[0].novelTypeName }"   >${requestScope.novelById[0].novelTypeName }</a>
            <em class="iconfont crumb-icon">></em>
            <h2 class="bread_crumbs_book_name">${requestScope.novelById[0].novelName }</h2>
            <cite class="rt"></cite>
        </span>
    </div>
    <!-- ------------第三部分--------- -->
    <div class="book-author ">
        <div class="left-nav">
            <a class="act" href="javascript:" id="work-info" rel="nofollow">
                <span class="left-text">作品信息</span>
            </a>
            
            <a class="nulu" href="#allCatalog" id="catalog" rel="nofollow">
                <span class="left-text">目录</span>
            </a>
        </div>

        <div class="book-information-normal" data-l1="2"> <a id="bookImg" class="book-detail-img" href="#"
                rel="nofollow"> <img
                    src="image/${requestScope.novelById[0].novelImgURL }" alt="${requestScope.novelById[0].novelTypeName }"></a>
            <div class="book-info">
                <div class="book-info-top">
                    <h1 class="" id="bookName">${requestScope.novelById[0].novelName }</h1>
                    <p class="book-meta"> 
	                    <span class="author" >作者:${requestScope.novelById[0].writerName }&nbsp;</span> 
	                    <span class="update-time">更新时间:2024-06-04 11:55:00</span> 
                    </p> 
                            <a class="book-latest-chapter"   href="#" >最新章节: 第${chapterNum }章 ${nowChapter.chapterName } </a>
                    <p class="book-attribute">
                     <span>连载</span>
                      <span class="dot">·</span> <span>签约</span> 
                      <span  class="dot">·</span> <span>VIP</span> <span class="dot">·</span> 
                     <a rel="nofollow" href="selectBookByTypeServlet?typeName=${requestScope.novelById[0].novelTypeName }"      title="${requestScope.novelById[0].novelTypeName }">${requestScope.novelById[0].novelTypeName }*</a> 
                     <a rel="nofollow" href="selectBookByTypeServlet?typeName=${requestScope.novelById[0].novelTypeName2 }"      title="${requestScope.novelById[0].novelTypeName2 }">${requestScope.novelById[0].novelTypeName2 }</a>
                      </p>
                    <p class="intro">${requestScope.novelById[0].novelIntroduction }</p>
                    <p class="count"><em>28.55万</em><cite>字</cite> <em>8970</em><cite>总推荐</cite>
                        <em>246</em><cite>周推荐</cite>
                    </p>
                </div>
                <div class="all-btn">
                    <p class="normal-btn"> <a class="blue-btn-detail J-getJumpUrl" href="MessageServlet2?chapterId=${shuChapter[0].chapterId }&novelId=${novelId}" id="readBtn"
                             rel="nofollow">免费阅读 </a> 
                </div>
            </div>
        </div> <em class="left-line"></em>
        <div class="author-information" data-l1="9"><a href="#" class="author-img" id="authorId"
                 rel="nofollow">
                <img src="images/100.jpg">
                <p class="level-lv"><span>Lv.1</span></p>
            </a>
            <div class="author-intro" data-l1="9">
                <h2><a class="writer-name" href="WriterServlet?writerId=${requestScope.novelById[0].writerId }"    rel="nofollow">${requestScope.novelById[0].writerName }</a>&nbsp; <a
                        class="god-light-new lv0" href="#"   ></a>
                </h2>
                <div class="outer-intro">
                    <div class="icon-left"></div>
                    <p>阅文集团Lv.1作家</p>
                    <div class="icon-right"></div>
                </div>
            </div>
            <div class="work-state">
                <div class="book">
                    <p class="">作品总数</p>
                    <div class="work-number"><em class="icon-left"></em> <em class="color-font-card"
                            style="color: rgb(40, 32, 32);">1</em><em class="icon-right"></em></div>
                </div><em class="line"></em>
                <div class="write">
                    <p class="">累计字数</p> <em class="color-font-card" style="color: rgb(40, 32, 32);">n万</em>
                </div><em class="line"></em>
                <div class="days">
                    <p class="">创作天数</p><em class="color-font-card" style="color: rgb(40, 32, 32);">n</em>
                </div>
            </div>
        </div>
    </div>
    <!-- --------------四----------------- -->
    <div class="intro-honor-label" id="j-intro-honor-tag">
        <div class="intro-honor">
            <div class="intro-detail">
                <div class="title">
                    <h2>作品简介</h2><em class="work-line"></em>
                </div>
                <p id="book-intro-detail">
                   ${introduction }
                </p>
            </div>
        </div>
        <p class="all-label" data-l1="4"> <a rel="nofollow" href="#" class="red"  
                title="小说"> 优质小说 </a> </p>
    </div>
    <!-- -------------------目录--------------------- -->
    <div class="book-catalog jsAutoReport" id="bookCatalogSection" >
    <div class="catalog-header">
      <p class="catalog-header-infos"><a href="#?chapterId=${chapterNum }"
          class="catalog-header-title">目录</a> <span class="catalog-header-desc">连载至${chapterNum }章</span> <span
          class="catalog-recent-status"><em class="icon"></em>日更1万+</span> </p>

    <div class="catalog-newest-con" id="catalogContinue"><a class="link-jump"  
        href="MessageServlet2?chapterId=${nowChapter.chapterId }&novelId=${novelId}">
        <p class="left">已更新至 <span class="link">第${chapterNum }章 ${nowChapter.chapterName }</span></p>
        <p class="right"><span class="default-txt"></span>${nowChapter.updateTime }<span class="hover-txt">立即阅读</span><em
            class="iconfont">></em></p>
      </a></div>
    <div class="catalog-all" id="allCatalog">
      <div class="catalog-volume"> 
       <label for="vol114924664">
          <div class="volume-header">
            <h3 class="volume-name">正文卷
            <span class="dot">·</span>共${chapterNum }章
            <span class="free"> 免费</span></h3>
          </div>
        </label>
        <ul class="volume-chapters">
        				 <c:forEach var ="item" items="${requestScope.shuChapter }" varStatus="status">
			         		<li class="chapter-item" data-rid="${status.index+1 }"><a class="chapter-name"
			              href="MessageServlet2?chapterId=${item.chapterId }&novelId=${novelId}"    
			              title="${item.chapterName } 首发时间：${item.updateTime }章节字数：${nums[status.index]}">第${status.index+1 }章 ${item.chapterName }</a>
			               </li>
         		</c:forEach>
        </ul>
      </div>
      
    </div>
  </div>
</body>
<script>
    $("#all-works").on("mouseenter", function () {
        console.log(1111111);
        $(".all-works-catalog").css("visibility", "visible");
        $(".all-works-catalog").css("opacity", "1");

    }).mouseleave(function () {
        $(".all-works-catalog").css("visibility", "hidden");
        $(".all-works-catalog").css("opacity", "0");
    });
    $("mulu").on("click",function(){

    });
</script>

</html>